<template>
  <div>
    <van-nav-bar
      title="积分商城"
      left-arrow
      @click-left="onClickLeft"
      fixed
    ></van-nav-bar>
    <div class="top">
      <div class="integral">
        <van-image class="img" src="/images/integral/1.png"></van-image>
        <div class="score">
          <p>6</p>
          <a>积分&nbsp;&gt;</a>
        </div>
      </div>
      <button class="btn">兑换记录</button>
    </div>
    <div class="middle">
      <h2>连续签到赚积分</h2>
      <van-steps :active="active" active-color="#ffc210">
        <van-step>1天</van-step>
        <van-step>2天</van-step>
        <van-step>3天</van-step>
        <van-step>4天</van-step>
        <van-step>5天</van-step>
        <van-step>6天</van-step>
        <van-step>7天</van-step>
      </van-steps>
      <van-image class="img" src="/images/integral/2.png"></van-image>
      <button v-if="!checked" class="btn">立即签到</button>
      <button v-else class="albtn">已签到</button>
      <p>查看签到日历</p>
    </div>
    <div class="bottom">
      <div class="integral" v-for="(item, index) in category[3]" :key="index">
        <router-link to="/integralmall">
          <div class="guide">
            <h2 v-if="index == 0">{{ category[0].title }}</h2>
            <h2 v-else-if="index == 1">{{ category[1].title }}</h2>
            <h2 v-else>{{ category[2].title }}</h2>
            <van-image class="img" src="/images/integral/3.png"></van-image>
          </div>
        </router-link>
        <div class="items">
          <div class="item" v-for="i in item" :key="i.id">
            <router-link :to="`/exchangedetails/${i.id}`">
              <van-image class="img" :src="i.img"></van-image>
              <div class="info">
                <h2>{{ i.kname }}</h2>
                <p v-if="i.cash"><b>{{ i.points }}</b>&nbsp;积分&nbsp;+&nbsp;<b>{{ i.cash }}</b>&nbsp;元</p>
                <p v-else><b>{{ i.points }}</b>&nbsp;积分</p>
                <p>剩余{{ i.rest }}件</p>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 4,
      checked: true,
      category: [], //保存积分分类数据
      integral: [], //保存积分商城列表数据
      arr1: [], //存放第1类别下的积分券
      arr2: [], //存放第2类别下的积分券
      arr3: [], //存放第3类别下的积分券
      arr: [],
    };
  },
  mounted() {
    // 加载积分分类数据
    this.axios.get("/category").then((res) => {
      this.category = res.data.data;
      console.log("积分分类：", this.category);
    });
    //加载积分商城列表数据
    this.axios.get(`/integral`).then((res) => {
      this.integral = res.data.data;
      //console.log("积分券：", this.integral);
      for (var item of this.integral) {
        if (item.title == this.category[0].title) {
          this.arr1.push(item);
        } else if (item.title == this.category[1].title) {
          this.arr2.push(item);
        } else {
          this.arr3.push(item);
        }
      }
      console.log("第一类积分券：", this.arr1);
      console.log("第二类积分券：", this.arr2);
      console.log("第三类积分券：", this.arr3);
      this.arr.push(this.arr1, this.arr2, this.arr3);
      this.category.push(this.arr);
      console.log(this.category);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.push("index");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-icon {
  color: black;
}
.top {
  width: 100vw;
  height: 38vw;
  margin-top: 46px;
  background: linear-gradient(#afde04, #9ac501);
  position: relative;
  overflow: hidden;
}
.top .integral {
  width: 32vw;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: absolute;
  top: 9vw;
  left: 36px;
}
.top .integral .img {
  width: 12vw;
}
.top .integral .score {
  color: #fff;
}
.top .integral .score p {
  display: inline-block;
  margin: 0 1vw;
  font-size: 8vw;
  font-weight: 100;
}
.top .btn {
  width: 28vw;
  height: 9vw;
  border: none;
  border-radius: 5vw;
  color: #a7d500;
  background-color: #fff;
  position: absolute;
  top: 11vw;
  right: -4vw;
}
.middle {
  width: 92vw;
  height: 50vw;
  background-color: #fff;
  border-radius: 2vw;
  position: absolute;
  top: 42vw;
  left: 4vw;
}
.middle h2 {
  display: block;
  text-align: left;
  margin: 5vw;
}
::v-deep .van-steps__items {
  text-align: left;
}
.middle .img {
  z-index: 2;
  width: 9vw;
  position: absolute;
  right: 0;
  top: 21vw;
}
.middle .btn {
  width: 38vw;
  height: 10vw;
  margin: 2vw 0;
  border-radius: 7vw;
  color: #a7d500;
  border: 1px solid #a7d500;
  background-color: #fff;
}
.middle .albtn {
  width: 38vw;
  height: 10vw;
  margin: 2vw 0;
  border-radius: 7vw;
  color: #fff;
  opacity: 0.6;
  border: 1px solid #a7d500;
  background-color: #a7d500;
}
.middle p {
  font-size: 3vw;
  color: #a7d500;
}
.bottom {
  width: 92vw;
  position: absolute;
  top: 92vw;
  left: 4vw;
}
.bottom .integral {
  text-align: left;
}
.bottom .integral .guide {
  display: flex;
  margin: 6vw 1vw 4vw;
  justify-content: space-between;
}
.bottom .integral .guide h2 {
  color: #000;
}
.bottom .integral .guide .img {
  width: 5vw;
}
.bottom .integral .items {
  width: 92vw;
  display: flex;
  justify-content: space-between;
  margin-bottom: 3vw;
  flex-flow: row wrap;
}
.bottom .integral .item {
  width: 44vw;
  background-color: #fff;
  border-radius: 2vw;
  margin-bottom: 3vw;
}
.bottom .integral .item .img {
  margin: 13px;
  width: 37vw;
}
.bottom .integral .item .info {
  margin: 0 3vw 3vw;
  color: #313030;
}
.bottom .integral .item .info h2 {
  font-size: 4vw;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bottom .integral .item .info p {
  display: block;
  font-size: 3vw;
  margin: 2vw 0;
}
.bottom .integral .item .info b {
  color: #a7d500;
  font-size: 4vw;
}
</style>
